import { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
    NavBar,
    Form,
    Input,
    TextArea,
    Button,
    Toast,
    Dialog,
    DatePicker,
    Picker,
    Space,
    Checkbox,
    Divider,
} from 'antd-mobile';
import { LeftOutlined } from '@ant-design/icons';
import styles from './index.module.less';

const diseaseOptions = [
    { label: '高血压', value: '高血压' },
    { label: '糖尿病', value: '糖尿病' },
    { label: '冠心病', value: '冠心病' },
    { label: '肝炎', value: '肝炎' },
    { label: '结核', value: '结核' },
    { label: '药物/药物', value: '药物/药物' },
    { label: '其他', value: '其他' },
];

const MedicalRecord: React.FC = () => {
    const { patientId } = useParams<{ patientId: string }>();
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [date, setDate] = useState<Date | null>(null);
    const [birth, setBirth] = useState<Date | null>(null);
    const [firstVisit, setFirstVisit] = useState<Date | null>(null);
    const [diseaseHistory, setDiseaseHistory] = useState<string[]>([]);

    const handleBack = () => {
        Dialog.confirm({
            content: '确定要离开吗？未保存的信息将会丢失',
            onConfirm: () => {
                navigate(-1);
            },
        });
    };

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            // TODO: 提交到后端
            Toast.show({
                icon: 'success',
                content: '保存成功',
            });
            navigate(`/prescription/${patientId}`);
        } catch (error) {
            // 校验失败
        }
    };

    return (
        <div className={styles.container}>
            <NavBar onBack={handleBack} className={styles.navBar}>
                病历书写
            </NavBar>
            <div className={styles.content}>
                <Form
                    form={form}
                    layout="vertical"
                    className={styles.form}
                    footer={
                        <Button
                            block
                            type="submit"
                            color="primary"
                            size="large"
                            onClick={handleSubmit}
                        >
                            保存并进入处方
                        </Button>
                    }
                >
                    <Divider>基本信息</Divider>
                    <Space block wrap>
                        <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
                            <Input placeholder="请输入姓名" />
                        </Form.Item>
                        <Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                            <Picker columns={[[{ label: '男', value: '男' }, { label: '女', value: '女' }]]}>
                                {(items, { open }) => (
                                    <div onClick={open}>{items[0]?.label || '请选择性别'}</div>
                                )}
                            </Picker>
                        </Form.Item>
                        <Form.Item name="age" label="年龄" rules={[{ required: true }]}> <Input placeholder="" type="number" /> </Form.Item>
                        <Form.Item name="birth" label="出生日期">
                            <DatePicker value={birth} onConfirm={setBirth} max={new Date()}>
                                {val => <div>{val ? val.toLocaleDateString() : '请选择出生日期'}</div>}
                            </DatePicker>
                        </Form.Item>
                        <Form.Item name="date" label="日期">
                            <DatePicker value={date} onConfirm={setDate}>
                                {val => <div>{val ? val.toLocaleDateString() : '请选择日期'}</div>}
                            </DatePicker>
                        </Form.Item>
                        <Form.Item name="firstVisit" label="初诊日期">
                            <DatePicker value={firstVisit} onConfirm={setFirstVisit}>
                                {val => <div>{val ? val.toLocaleDateString() : '请选择初诊日期'}</div>}
                            </DatePicker>
                        </Form.Item>
                    </Space>

                    <Form.Item name="chiefComplaint" label="主诉" rules={[{ required: true }]}> <TextArea placeholder="" rows={2} /> </Form.Item>
                    <Form.Item name="presentIllness" label="现病史" rules={[{ required: true }]}> <TextArea placeholder="" rows={3} /> </Form.Item>
                    <Form.Item name="pastHistory" label="既往史">
                        <Checkbox.Group
                            options={diseaseOptions}
                            value={diseaseHistory}
                            onChange={setDiseaseHistory}
                        />
                    </Form.Item>
                    <Form.Item name="personalHistory" label="个人史"> <TextArea placeholder="饮食/烟酒/嗜好等" rows={2} /> </Form.Item>
                    <Form.Item name="familyHistory" label="家族遗传史"> <TextArea placeholder="" rows={2} /> </Form.Item>
                    <Form.Item name="menstrualHistory" label="月经史/生育史"> <TextArea placeholder="" rows={2} /> </Form.Item>

                    <Divider>体格检查</Divider>
                    <Space block wrap>
                        <Form.Item name="bp" label="BP"> <Input placeholder="mmHg" /> </Form.Item>
                        <Form.Item name="t" label="T"> <Input placeholder="℃" /> </Form.Item>
                        <Form.Item name="p" label="P"> <Input placeholder="次/分" /> </Form.Item>
                        <Form.Item name="r" label="R"> <Input placeholder="次/分" /> </Form.Item>
                    </Space>
                    <Form.Item name="otherExam" label="其他体格检查"> <TextArea placeholder="" rows={2} /> </Form.Item>

                    <Divider>诊断</Divider>
                    <Form.Item name="diagnosisTcm" label="中医诊断"> <Input placeholder="" /> </Form.Item>
                    <Form.Item name="diagnosisWm" label="西医诊断"> <Input placeholder="" /> </Form.Item>

                    <Divider>治疗/医嘱/处方</Divider>
                    <Form.Item name="treatment" label="治疗/医嘱/处方"> <TextArea placeholder="" rows={3} /> </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default MedicalRecord; 